<template>
  <div id="TodayRoom" style="display:flex;">
    <div class="TodayRoomScreen">
      <!-- 日期选择 -->
      <div class="TodayRoomScreen_date">
        <span>日期选择</span>
        <div class="TodayRoomScreen_datePicker">
          <el-date-picker v-model="nowTime" @change="change_Date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
            :clearable="false">
          </el-date-picker>
        </div>
      </div>
      <!-- 房型筛选 -->
      <div class="roomScreen">
        <span>房型筛选</span>
        <div class="roomScreen_select">
          <!-- 选择房间分组 -->
          <el-popover placement="bottom-start" width="150" trigger="click" :append-to-body="false">
            <div class="screenRoom_item screenRoom_title">
              可售数/总房数： {{ (total_room - not_sell_room) }}/{{ total_room }}
            </div>
            <div v-for="item in room_group" :key="item.id" class="screenRoom_item">
              <span>
                <el-checkbox @change="toom_type_change('group')" v-model="item.isTrue"><span
                    class="screenRoom_item_name">{{ item.name }}</span></el-checkbox>
              </span>
              <span>{{ item.sell_num }}/{{ item.room_num }}</span>
            </div>
            <div slot="reference" class="screenRoom">全部房间分组<i class="el-icon-arrow-down" style="line-height: 25px;"></i>
            </div>
          </el-popover>

          <!-- 选择房型 -->
          <el-popover placement="bottom-start" width="150" trigger="click" :append-to-body="false">
            <div class="screenRoom_item screenRoom_title">
              可售数/总房数：{{ (total_room - not_sell_room) }}/{{ total_room }}
            </div>
            <div v-for="item in room_type" :key="item.id" class="screenRoom_item">
              <span>
                <el-checkbox v-model="item.isTrue" @change="toom_type_change('type')">
                  <span class="screenRoom_item_name">{{ item.pms_title }}</span>
                </el-checkbox>
              </span>
              <span>{{ item.sell_num }}/{{ item.room_num }}</span>
            </div>
            <div slot="reference" class="screenRoom">全部房型<i class="el-icon-arrow-down" style="line-height: 25px;"></i>
            </div>
          </el-popover>

        </div>
      </div>
      <!-- 房态筛选 -->
      <div class="roomCheckbox">
        <p>房态筛选</p>
        <div class="roomCheckbox_all">
          <!-- @change="handleCheckAllChange" -->
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll">全部</el-checkbox>
          <div>
            <span class="textRed">{{ total_room }}</span>
            <span>间</span>
          </div>
        </div>
        <el-divider></el-divider>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="room in room_num" :label="room.key" :key="room.key">
            {{ room.label }}
            <div class="text">
              <span class="textRed">{{ room.value }}</span>
              <span> 间</span>
            </div>
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <!-- 重置筛选 -->
      <div class="roomBootom">
        <!-- <el-button size="mini" @click="resetScreen">重置筛选</el-button> -->
        <el-button size="mini" @click="resetScreen">重置筛选</el-button>
      </div>
    </div>
    <!-- 房间状态 0正常 1停用房 2维修房 3保留房 4手动锁房 5自动锁房 6已预定 7已入住 8已退房 9已取消-->
    <div class="TodayRoomCentent">
      <div class="TodayRoomCentent_Group" v-for="item in list" :key="item.id">
        <div class="TodayRoomCentent_GroupTitle">
          {{ item.pms_title }}<span>(共{{ item.rooms.length }}间)</span>
        </div>
        <div class="TodayRoomCentent_GroupBox">

          <!-- v-if="room.order_info.status==1||room.order_info.status==2||room.order_info.status==3"==》 表示关房 -->
          <!-- room.is_need_clean==1 ==>表示脏房 -->
          <!-- &&room.order_info.status == 1 || room.order_info.status == 2 || room.order_info.status == 3 || room.order_info.status == 0  -->


          <div v-for="room in item.rooms" :key="room.id">
            <div class="TodayRoomCentent_GroupItem_box">
              <!-- 没有订单 -->
              <el-popover placement="right-start" width="65" trigger="click" :append-to-body="false">
                <div class="popoverContent">
                  <!-- @click="clickroom(room)" -->
                  <div v-if="room.order_info.status == 0" @click="openDrawer(1)">新增</div>
                  <div v-if="room.order_info.status == 1 || room.order_info.status == 2 || room.order_info.status == 3"
                    @click=" reschedule(room)">
                    转预定
                  </div>
                  <div v-if="formatDate(new Date()) == room.date && room.order_info.status == 0" @click="openDrawer(2)">入住
                  </div>
                  <div v-if="room.order_info.status == 0" @click="open_close_room(room)">关房</div>
                  <div @click="open_room(room)"
                    v-if="room.order_info.status == 1 || room.order_info.status == 2 || room.order_info.status == 3">
                    开房
                  </div>
                  <div v-if="room.is_need_clean == 1" @click="change_dirty_clean(room.id, '转净房')">转净房</div>
                  <div v-if="room.is_need_clean == 0" @click="change_dirty_clean(room.id, '转脏房')">转脏房</div>
                  <div @click="uncheck">取消</div>
                </div>
                <div slot="reference" class="hover">
                  <div class="TodayRoomCentent_GroupItem notHasOrder" v-if="room.order_info.has_order == false"
                    @click="click_room_info(room)" :style="{
                      backgroundColor: room.order_info.status == 1 || room.order_info.status == 2 || room.order_info.status == 3 ? '#cccccc' : '',
                      border: room.isShow_operation ? '1px solid #7450e9' : '1px solid transparent',
                      boxShadow: room.isShow_operation ? '0 1px 3px 0 #7450e9' : '0 1px 3px 0 transparent',
                    }">
                    <dl>
                      <dt>
                        {{ room.room_num }}
                      </dt>
                      <dd></dd>
                      <dd></dd>
                      <dd>
                        <span>￥2000</span>
                      </dd>
                    </dl>
                    <!-- 脏净房 -->
                    <div class="TodayRoomCentent_GroupItem_rightTop" v-if="room.is_need_clean == 1">
                      <span class="iconfont icon-saoba" style="font-size: 20px;"></span>
                    </div>
                    <!-- 关房 -->
                    <div class="TodayRoomCentent_GroupItem_rightBottom">
                      <span class="el-icon-remove" style="color: #666666;font-size: 15px;"
                        v-if="room.order_info.status == 1"></span>
                      <span class="iconfont icon-banshou" v-if="room.order_info.status == 2"></span>
                      <span class="iconfont icon-s-claim" v-if="room.order_info.status == 3"></span>
                    </div>

                    <div v-if="room.isShow_operation" class="notHasOrder_Icon"><i class="el-icon-check"></i></div>
                  </div>
                </div>
              </el-popover>

              <!-- 有订单 -->
              <div @click="click_has_order(room)" class="TodayRoomCentent_GroupItem" v-if="room.order_info.has_order"
                :style="{
                  backgroundColor:
                    room.order_info.status == 8 ? '#cccccc' :
                      room.order_info.has_order && room.status == 7 && room.order_info.order_info.end_date == nowTime ? '#CD8DFF' :
                        room.order_info.has_order && room.status == 6 && room.order_info.order_info.start_date == nowTime ? '#FFAA5C' :
                          room.order_info.status == 6 ? '#FED4B3' :
                            room.order_info.status == 7 ? '#C2EBFF' :
                              room.order_info.status == 1 || room.order_info.status == 2 || room.order_info.status == 3 ||
                                room.is_need_clean == 1 ? '#cccccc' : 'white'
                }">

                <dl>
                  <dt>

                    {{ room.room_num }}
                  </dt>
                  <dd>
                    <span v-if="room.order_info.has_order">{{ room.order_info.order_info.name }}</span>
                  </dd>
                  <dd>
                    <span v-if="room.order_info.has_order">{{ room.order_info.order_info.channel }}</span>
                  </dd>
                  <dd>
                    <span>￥2000</span>
                  </dd>
                </dl>
                <!-- v-if="room.order_info.status==1||room.order_info.status==2||room.order_info.status==3"==》 表示 -->
                <!-- room.is_need_clean==1 ==>表示脏房 -->
                <div class="TodayRoomCentent_GroupItem_rightTop" v-if="room.is_need_clean == 1">
                  <span class="iconfont icon-saoba" style="font-size: 20px;"></span>
                </div>
                <div class="TodayRoomCentent_GroupItem_rightBottom">
                  <!-- checkout_status -1欠款 0正常 1多收 -->
                  <!-- room.order_info.order_info.start_date  end_date  当前日期 -->
                  <div class="rightBottom_status"
                    v-if="room.order_info.has_order && room.order_info.order_info.checkout_status != 1">
                    {{ room.order_info.order_info.checkout_status == '-1' ? '欠' : '￥' }}
                  </div>
                  <div class="rightBottom_status"
                    v-if="room.order_info.has_order && room.status == 6 && room.order_info.order_info.start_date == nowTime && room.order_info.status != 8"
                    style=" backgroundColor: #FE9544">抵</div>
                  <div class="rightBottom_status"
                    v-if="room.order_info.has_order && room.status == 7 && room.order_info.order_info.end_date == nowTime && room.order_info.status != 8"
                    style=" backgroundColor: #8565FF">离</div>
                </div>
              </div>
            </div>

          </div>


        </div>
      </div>

    </div>

    <!-- 关房对话框 -->
    <div>
      <el-dialog title="关房" :visible.sync="close_room_dialog" width="530px">
        <el-form :model="close_room_data" label-width="70px" label-position="right">
          <el-form-item label="关房类型">
            <el-radio-group v-model="close_room_data.type" style="margin-top: -2px;">
              <el-radio :label="1">停用房</el-radio>
              <el-radio :label="2">维修房</el-radio>
              <el-radio :label="3">保留房</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" resize="none" :autosize='{ minRows: 6 }' v-model="close_room_data.remarks"
              maxlength="2048" show-word-limit>
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close_room_dialog = false">取 消</el-button>
          <el-button type="primary" @click="submit_close_room">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <OrderDFill :fillData.sync="fillData" @refreshRoom="handle_refreshRoom"
      @check_roomApartment="handle_check_roomApartment" @success_edit="editSuccess">
    </OrderDFill>
    <OrderDetail :detailData.sync="detailData" @refreshRoom="handle_refreshRoom" @open_fillOrder="handle_open_fillOrder">
    </OrderDetail>
  </div>
</template>

<script>

const RoomOptions = ['空脏', '住脏', '空房', '预离', '欠款', '空净', '入住', '预抵', '脏房', '多收'];
import { formatDate } from "../../../../api/countDay"//关于日期的方法
import { cloneDeep } from 'lodash'
import OrderDetail from '../../../../components/myOrderDrawer/OrderDetail/Detail.vue'
import OrderDFill from '../../../../components/myOrderDrawer/OrderFill/Fill.vue'

export default {
  components: {
    OrderDetail,//新建订单
    OrderDFill,
  },
  computed: {

  },
  data() {
    return {
      hotel_id: sessionStorage.getItem('hotel_id'),
      list: [],//显示的数据列表
      nowTime: formatDate(new Date()),//当前日期
      not_sell_room: 0,
      total_room: 0,
      room_num: [],
      room_type: [],//房型
      room_group: [],//房间分组
      checkedCities: [],//选中的房态
      close_room_dialog: false,
      close_room_data: {//关房数据
        type: 1,// 1停用房 2维修房 3保留房
        remarks: null,//备注
        room_id: null,
        date: null
      },

      operation_room_arr: [],//点击选中的房间列表

      data: {
        hotel_id: sessionStorage.getItem('hotel_id'),
        date: formatDate(new Date()),
        room_ids: null,
        group_ids: null,
        empty_dirty: null,
        empty_clean: null,
        empty: null,
        stay: null,
        stay_dirty: null,
        stay_clean: null,
        leave: null,
        arrive: null,
        repair: null,
        stop: null,
        reserve: null,
        close: null,
        dirty: null,
        arrears: null
      },
      pms: [],

      // 传递给填写订单组件的数据
      fillData: {
        isShow_drawer: false,
        drawer_room_data: [],
        selectOperated: null,//判断当前操作，1预订 2入住,3补录订单
        fill_order_title_show: 1,
        select_room: 0,
        name: 'today',

        orderData: null,
      },

      detailData: {
        name: 'today',
        order_id: null,
        order_status: null,
        isOpen_out_drawer: false,
        list: null,
        detail: null,
      },

      one_dayRoom: null,
      drawer: false,
      modelShow: false,
      selectTime: null,
      orderInfo: null,//有订单的弹窗储存
      pick_on: [],
      name: 'TodayRoom',
      checkAll: false,
      cities: RoomOptions,
      isIndeterminate: true,
      orderPoupDrawer: null,
      OrderPoupType: null,
      order_details: [],
      orderDrawer: '',
      order_log: null,
    }
  },
  beforeCreate() {


  },
  created() {
    this.getInit()
    this.getScreen()
  },
  methods: {
    clickroom(room) {
      console.log(room, 'room');
    },
    /**
     * 点击有订单的房间====打开订单详情抽屉,
     * @param {*} room 点击的当前房间，
     * 
     */
    click_has_order(room) {
      if (this.fillData.isShow_drawer) {
        this.fillData.isShow_drawer = false
      }
      let orderId = room.order_info.order_info.order_id
      let order_status = room.order_info.status
      this.detailData.order_id = orderId
      this.detailData.order_status = order_status
      this.detailData.list = this.list
      this.detailData.isOpen_out_drawer = true
    },
    /**
     * 没有订单房间的操作
     * @param {*} operat//判断当前操作，1预订 2入住 3补录
     * 
     */
    openDrawer(operat) {
      this.fillData.select_room = 0
      this.fillData.drawer_room_data = []
      this.fillData.fill_order_title_show = 1
      // this.fillData.selectOperated = operat
      this.conversion_operation_to_drawer()
      //点击操作，当前抽屉打开时,需要先关闭，再次打开==有动画
      // 不用再次打开的情况 1-抽屉关闭时，2-操作相同时，
      if (this.fillData.isShow_drawer == false || this.fillData.selectOperated == operat) {
        this.fillData.selectOperated = operat
        setTimeout(() => {
          this.fillData.isShow_drawer = true
        }, 500)
      } else {
        this.fillData.isShow_drawer = false
        setTimeout(() => {
          this.fillData.selectOperated = operat
          this.fillData.isShow_drawer = true
        }, 500)
      }
      // console.log(this.selectOperated ,'this.selectOperated ');
    },


    /**
     * 点击房间信息，显示操作房间的盒子
     * @param {*} room 点击的当前房间，
     */
    click_room_info(room) {
      console.log(room, '点击的房间信息');
      let roomId = room.id //当前点击的房间id
      let time = room.date //当前点击的房间id

      this.list.forEach(listItem => {
        listItem.rooms.forEach(item => {//遍历列表的数组
          if (roomId == item.id) {//在表格数组中找到点击的房间
            // 否，将数据从 operation_room_arr 数组 移除
            if (item.isShow_operation == true) {
              item.isShow_operation = false
              this.operation_room_arr.forEach((item, index) => {
                if (item.room_id === roomId) {
                  this.operation_room_arr.splice(index, 1)
                }
              })
              // 是，将数据添加到 operation_room_arr 数组
            } else {
              item.isShow_operation = true
              this.operation_room_arr.push({
                room_id: roomId,
                dates: [time],
                id: listItem.id,//父级id
              })
            }
          }
        })
      })
      console.log(this.operation_room_arr, '点击的选中房间信息');

      //当抽屉打开时，调用转换数据的方法，将数据转换到drawer_room_data数组里面
      //抽屉没有打开时，则再打开抽屉时调用
      if (this.fillData.isShow_drawer == true) {
        // document.body.click()
        this.conversion_operation_to_drawer()
      }
    },
    /**
     * 数据转换
     * 将operation_room_arr数据，转换到drawer_room_data数据里面
     */
    conversion_operation_to_drawer() {
      let arr = []
      this.operation_room_arr.forEach(async (item, index) => {
        arr.push({
          date: item.dates[0],//入住日期
          days: item.dates.length,//入住天数
          room_id: item.room_id,//房间id
          price: 0,//房间j价格
          dates: item.dates,//日期数组,
          people: [],
          isTrue: true,
        })
        this.getAppointRoomPrice(arr[index], item.id)//获取价格

        setTimeout(() => {
          this.fillData.drawer_room_data = arr
        }, 500);
      })

    },

    //获取指定房间日期的价格
    getAppointRoomPrice(room, room_id) {
      let room_date = {
        room_id: room_id,
        start_date: room.date,
        day: room.days,
      }
      // console.log(room_date, 'room_date');
      this.my_request('supplier/hotel-pms/book-price', room_date, 'GET').then(res => {
        let { code, data } = res.data
        if (200 == code) {
          room.price = data.book_price
        }
      })
    },
    /**
     * 取消 选中
     */
    uncheck() {
      this.operation_room_arr.forEach(item => {
        this.list.forEach(listItem => {
          listItem.rooms.forEach(room => {
            if (room.id == item.room_id) {
              room.isShow_operation = false
              document.body.click()
            }
          })
        })
      })
      this.operation_room_arr = []
      this.fillData.drawer_room_data = []
    },
    /**
     * 关房==》转预定
     * @param {*} room 当前行房间信息
     * 
     * 转预定操作
     * 1，先开房，再打开填写订单
     * 
     */
    reschedule(room) {
      // 1
      this.open_room(room)//开房


      setTimeout(() => {
        // 2
        this.click_room_info(room)

        // 3
        let operat = null
        if (this.nowTime == this.formatDate(new Date())) {
          operat = 2
        } else {
          operat = 1
        }
        this.fill_order_title_show = 1
        this.openDrawer(operat)
      }, 700);
    },
    // 开房
    open_room(room) {
      let data = {
        room_num_id: room.id,
        date: this.nowTime,
      }
      this.my_request('supplier/hotel-pms/open', data, 'PUT').then(res => {
        let { code, message } = res.data
        if (200 == code) {
          this.getScreen()
          document.body.click()
          this.$message.success('开房成功');
          this.uncheck()
        }
      })
    },
    /**
     * 
     * 打开关房对话框
     * @param {*} room_id 房间ｉｄ
     * @param {*} time 日期
     */
    open_close_room(room) {
      this.close_room_data.type = 1 //重置表单数据
      this.close_room_data.remarks = null
      this.close_room_dialog = true
      this.close_room_data.date = room.date
      this.close_room_data.room_id = room.id
    },
    // 确定关房
    submit_close_room() {
      let data = {
        room_num_id: this.close_room_data.room_id,
        date: this.close_room_data.date,
        remarks: this.close_room_data.remarks,
        status: this.close_room_data.type,
      }
      this.my_request('supplier/hotel-pms/close', data, 'PUT').then(res => {
        let { code, message } = res.data
        if (200 == code) {
          this.close_room_dialog = false
          this.getScreen()
          this.$message.success('关房成功');
          this.uncheck()
        }
      })
    },

    /**
     * 转为脏净房
     * @param {int} id //房间id
     */
    change_dirty_clean(id, oper) {
      let setRoomClear_data = {
        room_num_id: id
      }
      this.my_request('supplier/hotel-pms/clean', setRoomClear_data, 'PUT').then(res => {
        let { code, message } = res.data
        if (200 == code) {
          this.getScreen()
          document.body.click()
          this.uncheck()
          if (oper == '转脏房') {
            this.$message.success('转为脏房成功');
          } else {
            this.$message.success('转为净房成功');
          }
        }
      })
    },



    // 填写订单组件组件自定义事件
    //转换房型
    handle_check_roomApartment(val) {
      this.uncheck()
      if (val == 'successSubmit') {
        this.getScreen()
        this.fillData.isShow_drawer = false
      }
    },
    /**
     * 订单修改成功
     */
    editSuccess(detail) {
      console.log(detail, '订单修改成功detail');
      this.fillData.isShow_drawer = false
      this.detailData.detail = detail
      this.getScreen()
    },



    // 订单详情组件自定义事件

    /**
     * 刷新房间信息
     * 
     */
    handle_refreshRoom() {
      console.log('刷新房间信息');
      this.getScreen()
    },
    /**
    * 修改订单，
    * 打开填写订单组件
    *  1 关闭订单详情组件， 
    * 2 将值传递给填写订单组件 
    * 3 订单组件监听到值得变化之后，触发数据转换事件
    * 4 打开填写订单组件
    */
    handle_open_fillOrder(data) {
      // console.log('单日房态 打开填写订单');
      this.fillData.orderData = data
      this.fillData.fill_order_title_show = 2
      this.fillData.isShow_drawer = true
      this.fillData.name = 'today'
    },





    // 获取房间筛选列表
    getScreen(screenData) {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        date: formatDate(new Date()),
        room_ids: null,
        group_ids: null,
        empty_dirty: null,
        empty_clean: null,
        empty: null,
        stay: null,
        stay_dirty: null,
        stay_clean: null,
        leave: null,
        arrive: null,
        repair: null,
        stop: null,
        reserve: null,
        close: null,
        dirty: null,
        arrears: null
      }
      if (screenData) {
        data = screenData
        console.log(screenData, '房型筛选发生了变化');
      }
      this.my_request('supplier/hotel-pms/sign-day', data, "GET").then(res => {
        let { code, data } = res.data
        if (200 == code) {
          data.forEach(item => {
            item.rooms.forEach(items => {
              items.isShow_operation = false
            })
          })
          this.list = data
          console.log(data, '获取房间筛选列表');
        }
      })
    },
    getInit() {
      // 获取房态筛选词数据
      let data_screen = {
        hotel_id: this.hotel_id,
        date: this.nowTime,
      }
      this.my_request('supplier/hotel-pms/sign-day/screen', data_screen, 'GET').then(res => {
        // console.log(res, '获取房态筛选词');
        let { code, data } = res.data
        if (200 == code) {
          this.total_room = data.total
          this.not_sell_room = data.not_sell
          // 房间分组得数据
          data.type.forEach(item => {
            item.isTrue = false
          })
          // 房间房型数据
          this.room_type = data.type.map(item => {
            item.isTrue = false
            return item
          })
          console.log(this.room_type, 'this.room_type');
          this.room_group = data.group
          // 房间数量得数据
          for (const key in data.pms) {
            let name = ''
            this.pms.push(key)
            switch (key) {
              case 'empty':
                name = '空房'
                break;
              case 'empty_dirty':
                name = '空脏'
                break;
              case 'empty_clean':
                name = '空净'
                break;
              case 'stay_dirty':
                name = '住脏'
                break;
              case 'stay_clean':
                name = '住净'
                break;
              case 'stay':
                name = '住'
                break;
              case 'arrive':
                name = '预抵'
                break;
              case 'arrears':
                name = '欠款'
                break;
              case 'close':
                name = '关房'
                break;
              case 'reserve':
                name = '保留房'
                break;
              case 'stop':
                name = '停用房'
                break;
              case 'repair':
                name = '维修房'
                break;
              case 'leave_arr':
                name = '预离'
                break;
              default:
                name = '未定义'
                break;
            }
            let obj = {
              key: key,
              label: name,
              value: data.pms[key]
            }
            this.room_num.push(obj)
          }
        }
      })
    },
    // 选中的房态发生改变
    /**
     * 选中的房态发生改变
     * 判断房态是否发生选中，选中传1，否0
     * 
     */
    handleCheckedCitiesChange() {
      // console.log(this.checkedCities, '选中的房态发生改变');
      // let data = cloneDeep(this.data)
      let data = this.data
      this.pms.forEach(item => {

        let isSelect = this.checkedCities.includes(item)
        if (isSelect) {
          if (item == 'leave_arr') {
            data['leave'] = 1
            return
          }
          data[item] = 1
        } else {
          if (item == 'leave_arr') {
            data['leave'] = 0
          }
          data[item] = 0
        }
      })
      this.getScreen(data)
    },


    /**
     * 房间分组和房型筛选
     * @param {*} dataname 
     */
    toom_type_change(dataname) {
      let ids = []
      if ('type' == dataname) {
        this.room_type.forEach(item => {
          if (item.isTrue) {
            ids.push(item.id)
          }
        })
        this.data['room_ids'] = ids.join(',')
      }
      else if ('group' == dataname) {
        this.room_group.forEach(item => {
          if (item.isTrue) {
            ids.push(item.id)
          }
        })
        this.data['group_ids'] = ids.join(',')
      }
      this.getScreen(this.data)
    },
    /**
     * 日期改变
     */
    change_Date() {
      this.data.date = this.nowTime
      this.getScreen(this.data)
    },
    // 重置筛选
    resetScreen() {
      console.log('重置筛选');
      this.nowTime = formatDate(new Date())
      this.checkedCities = []
      this.room_group.forEach(item => {
        item.isTrue = false
      })
      this.room_type.forEach(item => {
        item.isTrue = false
      })
      this.getScreen()
    },

    /**
    * 转换成字符串格式
    * @param {*} date 
    * @param {*} key true返回MM-dd
    */
    formatDate(date, key) {
      let year = date.getFullYear();
      let month = String(date.getMonth() + 1).padStart(2, '0');
      let day = String(date.getDate()).padStart(2, '0');
      let hours = String(date.getHours()).padStart(2, '0');
      let minutes = String(date.getMinutes()).padStart(2, '0');
      let seconds = String(date.getSeconds()).padStart(2, '0');

      if (key == 1) {
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      } else if (key == 2) {
        return `${month}-${day} ${hours}:${minutes}`;
      } else {
        return `${year}-${month}-${day}`;
      }
    },
  }
}
</script>
<style lang="scss" >
// .el-popover组件样式

.popoverContent {
  text-align: center;
  line-height: 30px;
  color: black;
  font-weight: 500;
  border-radius: 4px;
  // font-size: 14px;
}

.popoverContent div:hover {
  background-color: black;
  color: white;
  cursor: pointer;
}

.hover.hover {
  cursor: pointer;
}

.notHasOrder {
  border: 1px solid transparent;
}

.notHasOrder:hover {
  border: 1px solid #7450e9;
  box-shadow: 0 1px 3px 0 #7450e9;
}

.notHasOrder_Icon {
  position: absolute;
  top: 0px;
  color: #7450e9;
  font-weight: 700px;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - 20px);
  height: calc(100% - 10px);
}

.roomScreen {
  .screenRoom {
    border: #ccc 1px solid;
    padding: 2px 10px;
    text-indent: 0.5em;
    margin-bottom: 15px;
    line-height: 25px;
    display: flex;
    justify-content: space-between;
  }

  .screenRoom:hover {
    cursor: pointer;
  }

  .screenRoom_item {
    line-height: 25px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;

    .screenRoom_item_name {
      display: inline-block;
      width: 85px;
      white-space: nowrap;
      /* 防止文本换行 */
      overflow: hidden;
      /* 控制溢出隐藏 */
      text-overflow: ellipsis;
      /* 显示省略号 */
    }
  }

  .screenRoom_title {
    padding: 8px 0;
  }

}

// 便捷开关
.Convenient {
  position: absolute;
  bottom: 10%;
  z-index: 10000;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


//房态单日
#TodayRoom {
  height: calc(100vh - 128px) ;

  // 左侧查询
  .TodayRoomScreen {
    padding: 30px 20px;
    width: 250px;
    background: #ffffff;
    position: relative;
    height: 100%;
    box-sizing: border-box;

    // 日期选择
    .TodayRoomScreen_date {
      margin-bottom: 40px;
      display: flex;
      flex-direction: column;

      .TodayRoomScreen_datePicker {
        margin-top: 15px;
        width: 183px;
        height: 24px;

        .el-date-editor {
          width: 183px;
          height: 24px;

          .el-input__inner {
            width: 183px;
            height: 24px;
            padding-left: 40px;
          }

          .el-icon-date {
            line-height: 0px;
          }
        }


      }
    }

    //房型筛选
    .roomScreen {
      display: flex;
      flex-direction: column;
      margin-bottom: 40px;

      .roomScreen_select {
        margin-top: 15px;

        .el-select {
          width: 183px;
          height: 24px;
          margin-bottom: 12px;

          .el-input__inner {
            width: 183px;
            height: 24px;

          }

          .el-select__caret {
            color: #303133;
          }

          .el-input__suffix {
            color: #303133;

            .el-input__icon {
              line-height: 0px;
            }
          }

        }
      }
    }

    //房态筛选
    .roomCheckbox {
      display: flex;
      flex-direction: column;

      //全选，选择全部
      .roomCheckbox_all {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
      }

      //分割线。
      .el-divider--horizontal {
        margin: 15px 0px;
      }

      //子选按钮
      .el-checkbox-group {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 183px;

        .el-checkbox {
          margin-left: auto;
          padding: 0px;
          width: 45%;
          margin: 0 0 15px 0px;

          .text {
            display: inline-block;
            font-size: 14px;
          }

          .textRed {
            color: red;
          }
        }
      }
    }

    //重置筛选,直接定位最下方
    .roomBootom {
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 100%;
      height: 60px;
      border-top: 1px solid #DCDFE6;
      padding: 15px;
      box-sizing: border-box;

      // z-index: 300000;
      .el-button {
        float: right;
      }

      .el-button:hover {
        cursor: pointer;
      }
    }
  }

  //房态单日内容
  .TodayRoomCentent {
    background-color: #f6f8ff;
    width: 100%;
    height: 100%;
    padding: 15px 20px;
    box-sizing: border-box;

    .TodayRoomCentent_Group {
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;

      .TodayRoomCentent_GroupTitle {
        line-height: 40px;

        span {
          color: #909399;
          margin-left: 10px;
        }
      }

      .TodayRoomCentent_GroupBox {
        display: flex;
        flex-wrap: wrap;

        .TodayRoomCentent_GroupItem_box {
          margin-bottom: 20px;
          margin-right: 20px;
        }


        .TodayRoomCentent_GroupItem {
          border-radius: 6px;
          width: 132px;
          height: 90px;
          background-color: white;
          padding: 4px 10px;
          box-sizing: border-box;
          position: relative;

          dt {
            margin-bottom: 5px;
            font-size: 14px;
          }

          dd {
            height: 18px;
            font-size: 14px;
          }

          dl dd:last-child {
            margin-top: 3px;
          }

          .TodayRoomCentent_GroupItem_rightTop {
            position: absolute;
            top: 10px;
            right: 10px;
          }

          .TodayRoomCentent_GroupItem_rightBottom {
            position: absolute;
            bottom: 10px;
            right: 10px;
            display: flex;
            justify-content: right;
            flex-wrap: wrap-reverse;
            width: 40px;

            span {
              margin-top: 5px;
              margin-left: 4px;
              height: 16px;
              line-height: 16px;
            }

            .rightBottom_status {
              margin-top: 5px;
              display: inline-block;
              width: 16px;
              height: 16px;
              line-height: 16px;
              font-size: 10px;
              font-weight: 100;
              color: white;
              margin-left: 4px;
              background-color: #F56C6C;
              text-align: center;
              border-radius: 2px;
            }
          }
        }
      }
    }
  }
}


.iconfont {
  color: #666666;
  font-size: 20px;
}
</style>